import React, { useState } from "react";
import { Table, Space, Button, Card, Modal, Tag } from "antd";
import { deleteUser } from "../../services/user"
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;
const { Column } = Table;
export default function List({ users, show, pagination, setIsModalVisible, click }) {
  console.log(pagination);
  const handleChange = ({ current, pageSize }) => {
    show({ current, pageSize });
  }

  let [studentId, setStudentId] = useState("");
  return (
    // <Card title="" bordered={false} >
    <Table dataSource={users}
      style={{ marginTop: "20px" }}
      onRow={record => {
        return {
          onClick: async (event) => {
            //  console.log(event.target.innerHTML);
            if (event.target.innerHTML == "删 除" || event.target.innerHTML == "<span>删 除</span>") {
              let data = await deleteUser({ id: record._id })
              console.log(data);
              confirm({
                title: '是否删除该用户?',
                icon: <ExclamationCircleOutlined />,
                onOk() {
                  console.log('确定');
                  show();
                },
                onCancel() {
                  console.log('取消');
                },
              });
            }


          }, // 点击行
        };
      }}
      pagination={pagination}
      onChange={handleChange}
      rowKey="_id"
    >
      <Column title="用户名" dataIndex="username" key="username" />
      <Column title="密码" dataIndex="pwd" key="pwd" />
      <Column title="昵称" dataIndex="nickname" key="nickname" />
      <Column title="管理员状态" dataIndex="privilege" key="privilege" />
      <Column title="地址" dataIndex="address" key="address"
        render={(text, record, index) =>
        (
          // console.log(text, record)
          <Space size="middle">
            <Tag color="lime" >{record.address[0]}</Tag>
            <Tag color="lime" >{record.address[1]}</Tag>
          </Space>
        )}
      />
      <Column
        title="操作"
        key="action"
        render={(text, record) => (

          <Space size="middle">
            <Button type="primary" onClick={() => click(record)}>修改</Button>

            <Button type="primary" danger value="删除"

            >
              删除
            </Button>
          </Space>
        )}
      />

    </Table>

    // </Card >

  );
}
